{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理登录界面</title>
    <!-- 支持响应式布局 -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    
    <link rel="stylesheet" href="{% static 'myadmin/plugins/bootstrap/css/bootstrap.min.css'%}">
    <link rel="stylesheet" href="{% static 'myadmin/plugins/font-awesome/css/font-awesome.min.css'%}">
    <link rel="stylesheet" href="{% static 'myadmin/plugins/ionicons/css/ionicons.min.css'%}">
    <link rel="stylesheet" href="{% static 'myadmin/plugins/adminLTE/css/AdminLTE.css'%}">
    <link rel="stylesheet" href="{% static 'myadmin/plugins/iCheck/square/blue.css'%}">
    <style>
        /* 密码框图标容器样式 */
        .password-group {
            position: relative;
        }
        /* 眼睛图标样式 */
        .toggle-password {
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999;
            z-index: 10;
            display: none; /* 默认隐藏眼睛图标 */
        }
        .toggle-password:hover {
            color: #333;
        }
        /* 锁图标样式（保持默认位置） */
        .glyphicon-lock {
            z-index: 5; /* 确保锁图标在眼睛图标下方 */
        }

        /* 验证码相关样式 */
        .verify-group {
            display: flex;
            gap: 10px;
        }
        .verify-input {
            flex: 1;
        }
        .verify-img {
            width: 100px;
            height: 34px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <a href="all-admin-index.html">
                <!-- 加粗字体
                <b>数据</b>
                -->
                后台管理系统</a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            <p class="login-box-msg">登录</p>
            <p class="login-box-msg" style="color:red">{{ info }}</p>
            <form action="{% url 'myadmin_dologin' %}" method="post">
            {% csrf_token %}
                <!-- 用户名/邮箱输入 -->
                <div class="form-group has-feedback">
                    <input type="text" name="login" class="form-control" placeholder="用户名/邮箱" required>
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <!-- 密码输入框 -->
                <div class="form-group has-feedback password-group">
                    <input type="password" name="pass" id="password" class="form-control" placeholder="密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <!-- 验证码输入部分 -->
                <div class="form-group">
                    <div class="verify-group">
                        <input type="text" name="verifycode" class="form-control verify-input" placeholder="请输入验证码" required>
                        <img src="{% url 'myadmin_verify' %}" alt="验证码" class="verify-img" id="verifyImg" title="点击刷新">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label><input type="checkbox"> 记住 下次自动登录</label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
            <div class="social-auth-links text-center">
                <p>- 或者 -</p>
                <a href="#" class="btn btn-block btn-social btn-phone btn-flat"><i class="fa fa-phone"></i> 手机号码登录</a>
                <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-qq"></i> 腾讯QQ用户登录</a>
                <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-weixin"></i> 微信用户登录</a>
            </div>
            <!-- /.social-auth-links -->
            <a href="#">忘记密码</a><br>
            <a href="all-admin-register.html" class="text-center">新用户注册</a>
        </div>
        <!-- /.login-box-body -->
    </div>
    <!-- /.login-box -->
    <script src="{% static 'myadmin/plugins/jQuery/jquery-2.2.3.min.js'%}"></script>
    <script src="{% static 'myadmin/plugins/bootstrap/js/bootstrap.min.js'%}"></script>
    <script src="{% static 'myadmin/plugins/iCheck/icheck.min.js'%}"></script>
    <script>
        $(function() {
            // iCheck 初始化
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%'
            });

            // 密码框交互逻辑：输入内容后显示眼睛图标，隐藏锁图标
            const $passwordInput = $('#password');
            const $toggleBtn = $('#togglePassword');
            const $lockIcon = $('.glyphicon-lock');

            // 监听密码输入事件
            $passwordInput.on('input', function() {
                const hasValue = $(this).val().trim().length > 0;
                if (hasValue) {
                    // 有输入时：显示眼睛图标，隐藏锁图标
                    $toggleBtn.show();
                    $lockIcon.hide();
                } else {
                    // 无输入时：隐藏眼睛图标，显示锁图标
                    $toggleBtn.hide();
                    $lockIcon.show();
                }
            });

            // 眼睛图标点击事件：切换密码显示/隐藏
            $toggleBtn.on('click', function() {
                const type = $passwordInput.attr('type') === 'password' ? 'text' : 'password';
                $passwordInput.attr('type', type);
                // 切换眼睛图标（睁眼/闭眼）
                $(this).toggleClass('fa-eye fa-eye-slash');
            });

            // 验证码刷新功能
            $('#verifyImg').on('click', function() {
                // 加随机参数防止缓存
                $(this).attr('src', "{% url 'myadmin_verify' %}?t=" + Math.random());
            });
        });
    </script>
</body>
</html>